<template>
    <el-container :style="{ height: containerHeight + 'px' }">
        <el-aside class="left_tree">
            <el-scrollbar>
                <AdminsLeftTree @clickDept="clickDeptTree"></AdminsLeftTree>
            </el-scrollbar>
        </el-aside>
        <el-main class="main">
            <!-- 搜索栏 -->
            <el-form :inline="true">
                <el-form-item>
                    <el-input v-model="listParm.search" placeholder="请输入账号或名称" />
                </el-form-item>
                <el-form-item>
                    <el-button :icon="Search" @click="serachBtn">搜索</el-button>
                    <el-button type="success" :icon="Plus" @click="addAdminBtn" v-permission="13">新增</el-button>
                </el-form-item>
            </el-form>
            <!-- 管理员列表 -->
            <el-table :data="tableData.list" style="width: 100%" :height="tableHeigth" border stripe>
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="username" label="账号" width="150" />
                <el-table-column prop="name" label="名称" width="100" />
                <el-table-column prop="tel" label="联系号码" width="150" />
                <el-table-column prop="email" label="邮箱" width="200" />
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.is_active" inline-prompt active-text="启用" inactive-text="禁用"
                            :width='50' disabled />
                    </template>
                </el-table-column>
                <el-table-column prop="date_add" label="添加时间" width="250" />
                <el-table-column prop="date_lock" label="解锁时间" width="250" />
                <el-table-column prop="err_num" label="密码错误次数" />
                <el-table-column label="角色" width="150">
                    <template #default="scope">
                        <template v-if="scope.row.role">
                            {{ scope.row.role.name }}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="部门" width="200">
                    <template #default="scope">
                        <template v-if="scope.row.department">
                            {{ scope.row.department.name }}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column width="200" align="center" label="操作" fixed="right">
                    <template #default="scope">
                        <el-button size="small" type="primary" :icon="Edit" @click="editAdminBtn(scope.row)"
                            v-permission="14">编辑</el-button>
                        <DelBtn @delBtn="delAdminBtn(scope.row)" :permission="15"></DelBtn>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="listParm.page"
                :page-sizes="[10, 20, 30, 50, 100]" :page-size="listParm.size" :total="total"
                layout="total, sizes, prev, pager, next, jumper" class="pagination"></el-pagination>
        </el-main>
    </el-container>
    <AdminsAddAndEdit ref="adminRef" @newGetAdminList="getAdminList"></AdminsAddAndEdit>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

import { Search, Plus, Edit } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus"

import AdminsAddAndEdit from './AdminsAddAndEdit.vue'
import DelBtn from '@/components/DelBtn.vue'
import { DialogType } from '@/hooks/useDialog'
import { delAdminApi, getAdminsApi } from '@/http/api/admins'
import AdminsLeftTree from './AdminsLeftTree.vue'

//容器的高度
const containerHeight = ref(window.innerHeight - 120)
//表格的高度
const tableHeigth = ref(window.innerHeight - 260)
// 定义表格数据
const tableData = reactive({
    list: []
})
// 表格查询参数
const listParm = reactive({
    search: '',
    page: 1,
    size: 20,
    department: ''
})
// 数据总数
const total = ref(0)
// 获取数据
const getAdminList = async () => {
    let res = await getAdminsApi(listParm)
    if (res && res.code == 200) {
        tableData.list = res.data.results
        total.value = res.data.count
    }
}
// 页容量改变时触发
const sizeChange = (size: number) => {
    listParm.size = size
    getAdminList()
}
// 页数改变时触发
const currentChange = (page: number) => {
    listParm.page = page
    getAdminList()
}
// 搜索
const serachBtn = () => {
    listParm.page = 1
    getAdminList()
}
// 选择部门
const clickDeptTree = (id: any) => {
    listParm.department = id
    listParm.page = 1
    getAdminList()
}
// 子组件AdminsAddAndEdit的ref属性
const adminRef = ref<InstanceType<typeof AdminsAddAndEdit>>()
// 添加管理员
const addAdminBtn = () => {
    adminRef.value?.onShow(DialogType.ADD, '添加管理员')
}
// 修改管理员
const editAdminBtn = (editData: any) => {
    adminRef.value?.onShow(DialogType.EDIT, '修改管理员', editData)
}
// 删除管理员
const delAdminBtn = async (delData: any) => {
    await delAdminApi(delData.id).then(res => {
        if (res && res.code == 204) {
            ElMessage.success('删除成功！')
            getAdminList()
        } else {
            ElMessage.error(res.msg)
        }
    })
}

onMounted(() => {
    window.addEventListener("resize", () => {
        containerHeight.value = window.innerHeight - 120
        tableHeigth.value = window.innerHeight - 260
    })
    getAdminList()
})

</script>

<style scoped lang='scss'>
.left_tree {
    width: 200px;
    padding: 20px 0 20px 20px;
}

.main {
    min-width: 500px;
}

.pagination {
    margin-top: 10px;
}
</style>